<template>
  <div id="browse-box">
    <div style="width: 100%;height: 50px">
      <h2>近期</h2>
    </div>
    <div class="cont-box">
      <el-row style="margin-top: 30px">
        <el-col
          :span="3"
          v-for="(o, index) in 10"
          :key="i"
          :offset="i > -1 ? 0 : 0"
        >
          <el-card :body-style="{ padding: '3px' } " shadow="hover">
            <el-image
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              class="image" lazy
            >
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
            <div style="padding: 14px;text-align: left">
              <el-tooltip class="item" effect="light" content="goods.goodsName" placement="top-start">
                <el-link :underline="false" class="span-box">
                  <span style="font-size: 12px;width: 100%">这是一个商品</span>
                </el-link>
              </el-tooltip>
              <div style="text-align: right;">
                <el-link :underline="false" type="danger" style="font-size: 10px">删除</el-link>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div style="width: 100%;height: 50px;margin-top: 20px">
      <h2>更早之前</h2>
    </div>
    <div class="cont-box">
      <el-row style="margin-top: 30px">
        <el-col
          :span="3"
          v-for="(o, i) in 10"
          :key="i"
          :offset="i > -1 ? 0 : 0"
        >
          <el-card :body-style="{ padding: '3px' } " shadow="hover">
            <el-image
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              class="image" lazy
            >
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
            <div style="padding: 14px;text-align: left">
              <el-tooltip class="item" effect="light" content="goods.goodsName" placement="top-start">
                <el-link :underline="false" class="span-box">
                  <span style="font-size: 12px;width: 100%">这是一个商品</span>
                </el-link>
              </el-tooltip>
              <div style="text-align: right;">
                <el-link :underline="false" type="danger" style="font-size: 10px">删除</el-link>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "browse-record",
  data() {
    return {}
  },
  methods: {},
}
</script>

<style scoped>
#browse-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cont-box {
  width: 100%;
  height: 100%;
}

h2 {
  font-size: 30px;
  font-weight: bold;
  text-align: left;
}
.span-box {
  height: 30px;
  overflow: hidden;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
</style>
